<template>
  <n-card size="small" class="navbar-card" :bordered="false">
    <n-icon size="30" style="float: left;" class="navbar-icon">
      <div v-if="dark" @click="dark = !dark">
        <bulb-twotone/>
      </div>
      <div v-if="!dark" @click="dark = !dark">
        <bulb-filled/>
      </div>
    </n-icon>
    <n-icon size="30" @click="createMessage" class="navbar-icon">
      <experiment-outlined/>
    </n-icon>
    <n-icon size="30" style="float: right;" class="navbar-icon">
      
      <div @click="active = !active">
        <block-outlined/>
      </div>
    </n-icon>
  </n-card>
  <n-drawer v-model:show="active" style="background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    border-radius: 20px 20px 5px 5px;" width="100%" height="40%" placement="bottom" :trap-focus="false" :closable="true" :hljs="hljs">
    <n-drawer-content  style="text-align: center;" closable title="极简搜索">
      <n-card :bordered="false" class="navbar-drawer-card">
        <div id="hitokoto_text" href="#" :theme-overrides="{ common: { fontSize: '24px' } }" style="padding: 5px">
          <n-skeleton v-if="loadingHitokoto" text :sharp="false" size="medium" />
        </div>
        <div style="text-align: right">&nbsp;&nbsp;—— &nbsp;一言  <n-button size="tiny" round @click="loadHitokoto">&nbsp;&nbsp;换一句</n-button></div>
      </n-card>

      <n-divider dashed/>

      <n-menu :options="menuOptions" @click="active = false"/>

      <template #footer>
        <n-popover trigger="hover">
          <template #trigger>
            <n-tag round>
              万里赴长安
              <template #avatar>
                <n-avatar src="https://qiniuimg.longxin.press/zhimao/head.jpg"/>
              </template>
            </n-tag>
          </template>
          <n-code :hljs="hljs" language="java" :code='`
public static void main(String[] args) {
    System.out.println("祝你：一夜暴富！");
}
`'/>
        </n-popover>
      </template>
    </n-drawer-content>
  </n-drawer>

</template>

<script lang="ts" src="./script.ts"></script>

<style scoped>@import './style.css';</style>
